3. Изображение

HTML предоставляет инструменты для добавления и управления изображениями на веб-страницах. Правильное использование этих дискрипторов позволяет улучшить доступность, производительность и SEO.

Простое изображение

Описание: Основной дискриптор для вставки изображений.

Пример:

<img src="image.jpg" alt="A description of the image" width="500" height="300">

Атрибуты:

  • src: Указывает путь к изображению (локальный или URL).
  • alt: Описание изображения для пользователей с ограниченными возможностями и для поисковых систем.
  • width и height: Задают размеры изображения в пикселях или процентах.

  • loading: Позволяет задать отложенную загрузку (lazy) для улучшения производительности.

    <img src="image.jpg" alt="Description" loading="lazy">

Рекомендации:

  • Всегда указывайте атрибут alt, чтобы улучшить доступность и SEO.
  • Используйте отложенную загрузку (loading="lazy") для изображений, которые не находятся в видимой области экрана.
  • Указывайте размер изображения для предотвращения смещения макета (Cumulative Layout Shift).

Адаптивные изображения

Описание: Позволяет использовать несколько версий изображения для разных устройств и разрешений экрана.

Пример:

<picture>
    <source srcset="image-large.jpg" media="(min-width: 800px)">
    <source srcset="image-small.jpg" media="(max-width: 799px)">
    <img src="image-default.jpg" alt="A description of the image">
</picture>

Рекомендации:

  • Применяйте <picture> для создания адаптивных сайтов.
  • Подготавливайте изображения разных размеров и форматов (например, WebP и JPEG).

Изображения с подписями

Описание: Семантические дискрипторы для группировки изображений и их подписей.

Пример:

<figure>
    <img src="image.jpg" alt="A beautiful landscape">
    <figcaption>A beautiful landscape with mountains.</figcaption>
</figure>

Рекомендации:

  • Используйте <figure> для изображений, которые требуют подписи или описания.
  • <figcaption> улучшает восприятие контента пользователями и поисковыми системами.

Рекомендации по использованию изображений в HTML

  1. Оптимизируйте изображения перед загрузкой на сайт

    • Используйте современные форматы (например, WebP) для уменьшения размера файла.
    • Сжимайте изображения с помощью инструментов (например, TinyPNG, Squoosh).

  2. Используйте относительные или абсолютные пути корректно

    • Относительный путь: images/photo.jpg — для локальных файлов.
    • Абсолютный путь: https://example.com/photo.jpg — для изображений на внешних серверах.

  3. Добавляйте атрибут alt ко всем изображениям

    • Это необходимо для SEO и пользователей с ограничениями (например, при использовании экранных дикторов).
    • Если изображение является декоративным, оставьте alt="" пустым.

  4. Подключайте адаптивные изображения

    • Используйте srcset и <picture> для разных экранов и разрешений:
<img src="small.jpg" srcset="medium.jpg 768w, large.jpg 1200w" sizes="(max-width: 768px) 100vw, 50vw" alt="Example">

  1. Используйте lazy loading

    • Это уменьшает время загрузки страницы, особенно если изображений много:
<img src="image.jpg" alt="Description" loading="lazy">

  1. Делайте изображения доступными

    • Добавляйте описание контекста изображения в alt. Например:
<img src="chart.jpg" alt="Bar chart showing sales growth over 5 years">

  1. Учитывайте дизайн и семантику

    • Для изображения с пояснением используйте <figure> и <figcaption>.

Пример: Полное использование изображений

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Example</title>
</head>
<body>
    <h1>Images on the Web</h1>

    <!-- Простое изображение -->
    <img src="image.jpg" alt="A simple image" width="400" loading="lazy">

    <!-- Адаптивное изображение -->
    <picture>
        <source srcset="image-large.webp" type="image/webp" media="(min-width: 800px)">
        <source srcset="image-small.jpg" type="image/jpeg" media="(max-width: 799px)">
        <img src="image-default.jpg" alt="Responsive image">
    </picture>

    <!-- Изображение с подписью -->
    <figure>
        <img src="landscape.jpg" alt="Mountain landscape">
        <figcaption>A stunning view of mountains at sunrise.</figcaption>
    </figure>
</body>
</html>